<template>
  <div class="root">
    <el-table
      v-loading="listLoading"
      ref="dragTable"
      :data="data"
      row-key="id"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column
        v-for="n1 in columns"
        :key="n1.id"
        :align="n1.align || 'align'"
        :label="n1.title || '无标题'"
        :width="!n1.children ? n1.width : ''"
      >
        <template v-if="n1.children">
          <el-table-column
            v-for="n2 in n1.children"
            :key="n2.id"
            :align="n2.align || 'align'"
            :label="n2.title || '无标题'"
            :width="!n2.children ? n2.width : ''"
          >
            <template v-if="n2.children">
              <el-table-column
                v-for="n3 in n2.children"
                :key="n3.id"
                :align="n3.align || 'align'"
                :label="n3.title || '无标题'"
                :width="!n3.children ? n3.width : ''"
              >
                <template slot-scope="scope">
                  <span>{{
                    n3.format
                      ? format(n3.format, mySet(scope.row, n3.dataIndex))
                      : mySet(scope.row, n3.dataIndex)
                  }}</span>
                </template>
              </el-table-column>
            </template>
            <template slot-scope="scope">
              <span>{{
                n2.format
                  ? format(n2.format, mySet(scope.row, n2.dataIndex))
                  : mySet(scope.row, n2.dataIndex)
              }}</span>
            </template>
          </el-table-column>
        </template>

        <template slot-scope="scope">
          <template
            v-if="n1.title == '操作' && n1.dataIndex && n1.dataIndex.length"
          >
            <el-button
              v-if="n1.dataIndex.indexOf('add') !== -1"
              :disabled="scope.row['ADD']"
              @click="
                tableBubbling({type: 'add', column: n1, content: scope.row})
              "
              >添加</el-button
            >
            <el-button
              v-if="n1.dataIndex.indexOf('delete') !== -1"
              :disabled="scope.row['DANGER']"
              type="danger"
              @click="
                tableBubbling({type: 'delete', column: n1, content: scope.row})
              "
              >删除</el-button
            >
            <el-button
              v-if="n1.dataIndex.indexOf('modify') !== -1"
              :disabled="scope.row['MODIFY']"
              @click="
                tableBubbling({type: 'modify', column: n1, content: scope.row})
              "
              >修改</el-button
            >
            <el-button
              v-if="n1.dataIndex.indexOf('details') !== -1"
              :disabled="scope.row['DETAILS']"
              @click="
                tableBubbling({type: 'details', column: n1, content: scope.row})
              "
              >查看详细</el-button
            >
            <el-button
              v-if="n1.dataIndex.indexOf('adjustment') !== -1"
              :disabled="scope.row['ADJUSTMENT']"
              @click="
                tableBubbling({
                  type: 'adjustment',
                  column: n1,
                  content: scope.row,
                })
              "
              >调整</el-button
            >
            <el-button
              v-if="n1.dataIndex.indexOf('approval') !== -1"
              :disabled="scope.row['auditStatus'] != 0"
              @click="
                tableBubbling({
                  type: 'approval',
                  column: n1,
                  content: scope.row,
                })
              "
              >审批</el-button
            >
            <el-button
              v-if="n1.dataIndex.indexOf('check') !== -1"
              :disabled="scope.row['CHECK']"
              @click="
                tableBubbling({type: 'check', column: n1, content: scope.row})
              "
              >审核</el-button
            >
            <el-button
              v-if="n1.dataIndex.indexOf('shifts') !== -1"
              :disabled="scope.row['SHIFTS']"
              @click="
                tableBubbling({type: 'shifts', column: n1, content: scope.row})
              "
              >班次管理</el-button
            >
            <el-button
              v-if="n1.dataIndex.indexOf('team') !== -1"
              :disabled="scope.row['TEAM']"
              @click="
                tableBubbling({type: 'team', column: n1, content: scope.row})
              "
              >班组管理</el-button
            >
          </template>
          <template>
            <template v-if="n1.type == 'switch'">
              <el-switch
                v-model="scope.row[n1.dataIndex]"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="
                  tableBubbling({type: n1.type, column: n1, content: scope.row})
                "
              >
              </el-switch>
              <span style="margin-left: 5px; vertical-align: middle;">{{
                scope.row[n1.dataIndex] ? n1.trueText : n1.falseText
              }}</span>
            </template>
            <template v-if="n1.type == 'meiju'">
              <span style="margin-left: 5px; vertical-align: middle;">{{
                n1.meiju[scope.row[n1.dataIndex]]
              }}</span>
            </template>
            <template v-else-if="n1.type instanceof Array">
              <el-button
                v-for="(nn1, ii1) in n1.type"
                :style="{...nn1}"
                :key="nn1.id"
                @click="
                  tableBubbling({
                    type: nn1.event,
                    column: n1,
                    childrenColumn: nn1,
                    childrenIndex: ii1,
                    content: scope.row,
                  })
                "
                >{{ nn1.text }}</el-button
              >
            </template>
            <template v-else>
              <span>{{
                n1.format
                  ? format(n1.format, mySet(scope.row, n1.dataIndex))
                  : mySet(scope.row, n1.dataIndex)
              }}</span>
            </template>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <div v-if="total > 0" class="page">
      <el-pagination
        :current-page="params.pageNum"
        :page-sizes="[15, 50, 100, 200, 500, 1000, 5000, 10000, 50000]"
        :page-size="params.pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Table',
  props: {
    columns: {
      type: Array,
      default: [],
    },
    url: {
      type: String,
      detault: '',
    },
    pparams: {
      type: Object,
      default: {},
    },
    atone: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      listLoading: false,
      data: [],
      params: {
        pageNum: 1,
        pageSize: 15,
      },
      paramsTmp: {},
      flatColumns: [],
      total: 0,
    }
  },
  computed: {},
  created() {
    window._table = this
    this.atone && this.fetchList()
  },
  methods: {
    async fetchList(flag) {
      let newParams
      if (!flag) {
        // 这是点击页数变化跟当前页变化进来的 还有一些修改 删除的都要保留当前搜索参数最新
        this.params.pageNum = this.params.pageNum || 1
        newParams = JSON.parse(
          JSON.stringify({...this.pparams, ...this.params}),
        )
      } else {
        newParams = JSON.parse(
          JSON.stringify({...this.params, ...this.pparams}),
        )
        this.params.pageNum = this.pparams.pageNum || 1
      }
      delete newParams.timer
      delete newParams.date
      this.listLoading = true
      const {data, count} = await this.$axios({
        url: this.url,
        method: 'get',
        params: newParams,
      })
      this.data = data.data
      this.total = data.count
      this.listLoading = false
    },
    tableBubbling(obj) {
      this.$emit('tableBubbling', obj)
    },
    handleSizeChange(i) {
      this.params.pageNum = 1
      this.params.pageSize = i
      this.fetchList()
    },
    handleCurrentChange(i) {
      this.params.pageNum = i
      this.fetchList()
    },
    DoingFlat(list) {
      list.forEach((n1, i1) => {
        if (n1.children && n1.children.length) {
          this.DoingFlat(n1.children)
        } else {
          this.flatColumns.push(n1.dataIndex)
        }
      })
    },
    format(format, val) {
      switch (format) {
        case 'date':
          return this.$utils.parseTime(val, '{y}-{m}-{d} {h}:{i}')
          break
        default:
          break
      }
    },
    mySet(a, b) {
      if (b.indexOf('.') != -1) {
        let tmpA = JSON.parse(JSON.stringify(a))
        b.split('.').forEach((n1, i1) => {
          tmpA[n1] ? (tmpA = tmpA[n1]) : (tmpA = '')
        })
        return tmpA
      } else {
        return a[b]
      }
    },
  },
}
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.page {
  padding-top: 20px;
}
</style>
